<script setup>
import { defineProps } from "vue";
const props = defineProps({
  carInfo: {
    type: Object,
    required: true,
  },
});

function navigateToService() {
  uni.navigateTo({
    url: "/pages/Service/ServiceDetail/index",
  });
}
</script>
<template>
  <view>
    <div class="service-card">
      <div class="car-image"></div>
      <div class="car-info">
        <div class="number-with-op">
          <div class="number">车牌号：{{ props.carInfo.number }}</div>
          <div class="op">
            更多
            <image
              src="@/static/icon/chevron-right.png"
              style="width: 10px; height: 10px"
            ></image>
          </div>
        </div>
        <div class="model">车型：{{ props.carInfo.model }}</div>
        <div class="time-span">
          租期：{{ props.carInfo.rent_start }} 至 {{ props.carInfo.rent_end }}
        </div>
        <div class="service-op">
          <button class="service-button" @click="navigateToService">
            服务选择
          </button>
        </div>
      </div>
    </div>
  </view>
</template>

<style scoped>
.service-card {
  width: 100%;
  height: 158px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 20px;
  padding: 20px;
  background-color: #f7fff3;
  border-radius: 10px;
  box-sizing: border-box;
}

.car-image {
  width: 150px;
  height: 118px;
  border-radius: 20px;
}

.car-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  justify-content: flex-start;
  font-size: 12px;
}

.number-with-op {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.service-op {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.service-button {
  width: 160px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 10px 0 0 0;
  font-size: 16px;

  background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
  color: white;
  border: none;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
}
</style>
